<template>
  <div>
    <el-container class="home">
      <!-- 头部 -->
      <el-header
        ><el-row>
          <el-col :span="3"
            ><div class="grid-content bg-purple">logo</div></el-col
          >
          <el-col :span="18"
            ><div class="grid-content bg-purple-light head-title">
              后台管理系统
            </div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <el-dropdown @command="logOut">
                <span class="el-dropdown-link">
                  {{ userinfo.username
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="userout"
                    >注销登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row></el-header
      >
      <!-- 左侧菜单 -->
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="2" class="el-menu-vertical-demo" unique-opened router>
            <el-submenu :index="item.path" v-for="item in menusData" :key="item.id">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="val.path" v-for="val in item.children" :key="val.id">{{val.authName}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧内容 -->
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      menusData: {},
    };
  },
  methods: {
    //退出登录
    logOut(userout) {
      this.$message({
        message: "退出成功",
        type: "success",
      });
      localStorage.removeItem("userinfo");
      this.$router.push({ path: "/login" });
    },
  },
  async mounted() {
    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
    const { data } = await this.$axios.get("/menus");
    // console.log(data);
    if (data.meta.status == 200) {
      this.menusData = data.data;
    }else {
      this.$message.error(data.meta.message);
    }
  },
};
</script>

<style>
.home {
  height: 600px;
}
.head-title {
  font-size: 22px;
  font-weight: 600;
}
.el-dropdown-link {
  cursor: pointer;
  font-size: 16px;
  color: #409eff;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

/* .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  } */
</style>
